<template>
  <div>
      <hr size="5px" color="red">
     <table class="table">
        <tr>
          <td></td>
          <td></td>
          <td class="loginandregister" >

          <!--   用if来进行登录状态的判断 -->
            <div v-if="!logging_status()">
            <router-link to="/login">登录</router-link>|
            <router-link to="/register">注册</router-link>
            </div>
             <div v-else>
                欢迎用户: [{{user}}]----- <span @click="loginout">登出</span>
            </div>
            </td>
        </tr>
      </table>
      <hr size="4px" color="silver">
   
   <div class="content">
    <ul>
          <li>
              <div class="shoppingcss1">全部商品</div>
              <div class="shoppingcss2">满38免邮费</div>
          </li>
          
    </ul>
    
    <table class="table1">
      <tr>
        <td>商品</td>
        <td>数量</td>
        <td>小计(元)</td>
        <td>合计</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in shoppingList" v-if="logging_status()">
        <td >{{item.productName}}</td>
        <td>{{item.quantity}}</td>
        <td>{{item.price*item.quantity}}</td>
        <td> <el-input-number v-model="item.quantity" @change="handleChange(item.id,item.quantity)" :min="1" :max="10" label="描述文字"></el-input-number></td> 
        
        <td><el-button type="primary" icon="el-icon-delete" style="" @click="deleteShoppingShow(item.id)"></el-button></td>
      </tr>
    
      
    </table>
    <div class="nav">
                  <i class="el-icon-shopping-cart-2"></i>
                  <router-link to="/index"> <span>继续购物</span></router-link>
                </div>
  </div>

  <div class="you_like">
    <p style="float:left; background-color:red;">猜猜你喜欢</p>
      <table>
        <tr>
          <li v-for="item in bookList.slice(0,6)"><img  :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="无法加载">{{item.productName}}<br>价格:{{item.price}}</li>
        </tr>
      </table>
  </div>
<!-- 尾部 -->
    <div class="footer">
      <img  src="../../assets/images/footert.jpg" alt="无法加载">
        <p>轩城商城官网 在线留言  联系我们  </p>
        <p>TANGXUAN ©2029 轩城图书有限公司 技术支持：小轩科技</p>
        <p>地址：中国·湖南·衡阳市xx路x1号湖南财经工业职业技术学院　电话：012651-1561　微信：123456978</p>
        <p>版权所有：轩城图书有限公司 湘ICP备061445864号</p>
        <p></p>
    </div>

  </div>
</template>

<script>
export default {
  name:"shoppingTrolley",
  data(){
    return{
         
         //用于进行购物车页面时，得到购物车信息显示
        shoppingList:[{
            id:'',
             proId:'',
            userId:'',
            addDate:'',
            price:'',
            quantity:'',
 

        }],
        //用于判断登录状态的关键字
        user:'',

        //用于接收下方推荐的数据
       bookList:[{
        id:'',
        catlogId:'',
        productName:'',
        price:'',
        spec:'',
        stockQty:'',
        refPrice:'',
        imageUrl:'',
        shelfStatu:'',
        catelogName:''

      }],
     
          bookList2:[{
            id:'',
          pro_id:'',
          user_id:'',
          add_date:'',
          price:'',
          quantity:'',
          productName:''


      }]
    
    
    
    }
  }, created(){
    //用于得到商品书籍的信息在购物车下面推荐显示
    this.getbookName()
    //用于得到每个用户的购物车信息
    this.getshoppingName()
    //用于判定登录状态
    this.logging_status()
    
    
  },mounted(){
   
  }
  ,methods:{
    
      getbookName:function(){
        this.$axios.get("/user/getbook",).then(res=>{
            this.bookList=res.data;
            console.log(this.bookList)
        })
      }


      ,getshoppingName:function(){
        var UserId =localStorage.getItem("userId");
         console.log(UserId)
        this.$axios.get("/shopping/getdata",{params:{UserId:UserId}}).then(res=>{
          this.shoppingList=res.data;
          console.log(this.shoppingList)
          
        })
      },


      logging_status:function(){
        if(localStorage.getItem("user")!=null){
         this.user=localStorage.getItem("user");
          return true
          
        }
        else{
          return false
        }
      },
         loginout:function(){
        localStorage.removeItem("user");
        localStorage.removeItem("userId");
         this.user=localStorage.getItem("user");
         
         //用于页面的手动刷新 
          this.$router.go(0)
        alert("退出登录");
    
      },
      //修改商品数量的数据
      handleChange:function(id,quantity){
        this.$axios.get("/shopping/updateShopingQuantity",{params:{id:id,quantity:quantity}}).then(res=>{
          console.log(res)
        })
      },
      //用于得到购物车数据
      getbookName2:function(id){
        console.log(id)
        this.$axios.get("/product/shoppingshowName",{params:{id:id}}).then(res=>{
            this.bookList2=res.data;
            console.log(this.bookList2)
        })
      }
    ,
    deleteShoppingShow:function(id){
      this.$axios.get("/shopping/deleteShopping",{params:{id:id}}).then(res=>
      {
          if(res!=0){
            alert("删除成功")
             this.getshoppingName()
          }
          else{
            alert("删除失败")
          }
      })
    }
      
}}

</script>

<style scoped>
.loginandregister{
  float: right;
  line-height: 50px;
  margin-right:10px ;
}
.table{
  width: 100%;
  height: 50px;
  color: #000;
  background-color: rgb(238, 231, 231);
  
}
.content{
  width: 70%;
  margin: 20px auto;
  
}
.shoppingcss1{
float: left;;
}
.shoppingcss2{
float: right;
}
.content li{
  list-style: none;
  height: 30px;
  border-bottom: 1px solid black;
 

}

a{
  text-decoration: none;
}
/* .table1 {
  
} */

.table1 tr td{
  width: 500px;
  height: 100%;
 

 }
 .nav{
  width: 100px;
  height: 40px;
  margin-left: 90% ;
  margin-top: 20px ;
  line-height: 40px;
  background-color: red;
}
.you_like{
  width: 70%;
  height: 600px;
  margin-left: 15%;
 border-bottom:1px solid black;
 border-left:1px solid black;
  border-right:1px solid black;
}
.you_like p{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.you_like img{
  width: 100%;
  height: 160px;

}
.you_like li{
  list-style: none;
  float: left;
  width: 15%;
   margin-left:5%;
   margin-right: 120px;
}
.buy{
  width: 5px;
  height:5px;
}
.footer{
 
  width: 70%;
  height: 300px;
  
  margin: 10px auto;
}
.footer p{
  margin-top: 20px;
}
.footer img{
  width: 100%;
  
}
</style>